#{extends 'main.html' /}
#{set title:'Home' /}
#{set 'moreScripts'}
    #{script 'index.js'/}
#{/set}

#{set 'moreStyles'}
#{/set}

<div class = "steps"> 
	<img id="firstImage" class="imageStep scaledImage"  src = "/public/images/banner02.jpg" alt="three steps"/>
</div> 

<div class = "main"> 
#{if persons}
	<div id="existingPersonsList">
	<table>
		<tr><td>Name</td><td>FirstName</td><td>Email</td></tr>
		#{list persons, as: 'p'}
		#{if p != null}
			<tr>
				<td>${p.lastName}</td>
				<td>${p.firstName}</td>
				<td>${p.email}</td>
			</tr>
		#{/if}
		#{else}
			<tr><td colspan="3">Encountered NULL person :(</td></tr>	
		#{/else}
		#{/list}
	</table>
	</div>
#{/if}
#{else}
	<div style="background-color: #ff0000; display: block; height: 25px; width: 100%">
		No p yet
	</div>
#{/else}


#{if addresses}
	<div id="existingAddList">
	<table>
		<tr><td>Street</td><td>City</td><td>Zip</td></tr>
		#{list addresses, as: 'a'}
		#{if a != null}
			<tr>
				<td>${a.street}</td>
				<td>${a.city}</td>
				<td>${a.zip}</td>
			</tr>
		#{/if}
		#{else}
			<tr><td colspan="3">Encountered NULL address :(</td></tr>	
		#{/else}
		#{/list}
	</table>
	</div>
#{/if}
#{else}
	<div style="background-color: #ff0000; display: block; height: 25px; width: 100%">
		No addresses yet
	</div>
#{/else}


#{if customers}
	<div id="existingCustomerList">
	<table>
		<tr><td>Name</td><td>FirstName</td><td>Email</td><td>Password</td></tr>
		#{list customers, as: 'cust'}
		#{if cust != null && cust.person != null}
			<tr>
				<td>${cust.person.lastName}</td>
				<td>${cust.person.firstName}</td>
				<td>${cust.person.email}</td>
				<td>${cust.password}</td>
			</tr>
		#{/if}
		#{else}
			<tr><td colspan="3">Encountered NULL customer :(</td></tr>	
		#{/else}
		#{/list}
	</table>
	</div>
#{/if}
#{else}
	<div style="background-color: #ff0000; display: block; height: 25px; width: 100%">
		No customers yet
	</div>
#{/else}



</div>
